<template>
	<view class="card">
		<view class="box mb-50">
			<view class="box_item">
				<text class="box_title mb-20">我的余额</text>
				
				<view class="box_money d-flex">
					<text class="money">188.88</text>
					<Icon name="arrow-right" color="#fff" class="right ml-30" />
				</view>
			</view>
		</view>
		
		<view class="box d-flex">
			<view class="box_item">
				<text class="box_title mb-20">累计收入</text>
				
				<view class="box_money d-flex">
					<text class="money">188.88</text>
					<Icon name="arrow-right" color="#fff" class="right ml-30" />
				</view>
			</view>
			
			<view class="box_item">
				<text class="box_title mb-20">可提现收入</text>
				
				<view class="box_money d-flex">
					<text class="money">188.88</text>
					<Icon name="arrow-right" color="#fff" class="right ml-30" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Icon from '@/components/Icon/index.vue'
</script>

<style scoped lang="scss">
.card {
	padding: 20rpx 25rpx 30rpx;
	border-radius: 18rpx;
	background: {
		image: url('/static/image/my/banner.png');
		repeat: no-repeat;
		size: cover;
		position: center
	};
	
	.box {
		flex-direction: row;
		
		&_item {
			flex: 1;
		}
		
		&_title {
			color: #fff;
			font: {
				size: 22rpx;
			}
		}
		
		&_money {
			flex-direction: row;
			align-items: center;
			
			.money {
				color: #fff;
				font: {
					size: 36rpx;
					family: "Impact Normal", "Impact", sans-serif;
				}
			}
		}
	}
}
</style>
